<template>
    <div>
        <s-search-bar>
            <el-form :model="rfidEquipment" label-width="110px">
                <el-form-item label="小区" prop="orgId" v-hasOrg>
                    <org-select v-model="rfidEquipment.orgId" @select="query" default-value></org-select>
                </el-form-item>
                <!-- <el-form-item prop="type" label="设备类型">
                    <equipment-type v-model="rfidEquipment.type" @select="query" :showAll="false" default-value></equipment-type>
                </el-form-item> -->
                <el-form-item prop="equipmentName" label="设备名称">
                    <el-input v-model="rfidEquipment.equipmentName"></el-input>
                </el-form-item>
                <el-button @click="query" icon="el-icon-search" style="margin-left:20px" type="primary">查询</el-button>
            </el-form>
        </s-search-bar>

        <basic-table :tableLoading="tableLoading" :tableData="tableData" :tableOption="tableOption" :tablePage="tablePage" @table-search="query">
            <template slot="isAlarmName" slot-scope="scope">
                <el-tag type="warning">{{scope.scope.row.isAlarmName}}</el-tag>
            </template>
            <template slot="type" slot-scope="scope">
                <el-tag type="success">{{_formatEquipmentType(scope.scope.row.type)}}</el-tag>
            </template>
            <template slot="isError" slot-scope="scope">
                <el-tag type="success">{{scope.scope.row.isError}}</el-tag>
            </template>

            
            <template slot="operation" slot-scope="scope">
                <!-- <el-button type="text" icon="el-icon-delete" @click="rowDel(scope.scope.row,scope.scope.$index)">删除</el-button> -->
                <el-button type="text" icon="el-icon-finished" @click="falsePositives(scope.scope.row,scope.scope.$index)">误报</el-button>
                <el-button type="text" icon="el-icon-finished" v-show="!!scope.scope.row.cameraCaptureUrl&&rfidEquipment.type==2&&scope.scope.row.showVideo" @click="queryCapture(scope.scope.row)">抓图</el-button>
                <el-button type="text" icon="el-icon-finished" v-show="rfidEquipment.type==2&&scope.scope.row.showVideo" @click="doVideo(scope.scope.row,scope.scope.$index)">视频</el-button>
            </template>
        </basic-table>
        <el-dialog :title="videoTitle" :visible.sync="dialogVisible" width="60%">
            <video style="width:100%;max-height:550px" ref="video" controls autoplay="" name="media">
                <source :src="videoSrc" type="video/mp4">
            </video>
            <!-- <video style="width:100%;max-height:550px" ref="video" controls :src="videoSrc"></video> -->
        </el-dialog>
        <el-dialog :visible.sync="imgDialogVisible" width="70%" style="text-align:center">
            <div v-if="!captureUrl" style="min-height:400px;display: flex;align-items: center;justify-content: center;flex-direction: column;" >
                <div>暂无图像</div>
                <i class="el-icon-picture-outline" style="font-size:30px"></i>
            </div>
            <img v-else :src="captureUrl" alt="" style="max-height:550px;width: 100%;">
        </el-dialog>
    </div>
</template>


<script>
import { tableOption} from '@/const/crud/business/camera-record'
import * as API from '@/api/business/rfid-record'
const fn = (type)=>{
    let index = tableOption.alarmDicts.findIndex(item=>{
        return item.type == type
    })
    return index>-1?tableOption.alarmDicts[index].label:'~'
}
export default {
    data() {
        return {
            tableData: [],
            tableOption: tableOption,
            tableLoading: false,
            rfidShowDialog: false,
            videoSrc:'',
            videoTitle:'',
            tablePage: {
                size: 50,
                current: 1,
                total: 0
            },
            rfidEquipment: {
                rfidEquipmentId: '',
                equipmentName: '',
                rfidEquipmentCode: '',
                orgId: -1,
                rfidPower: '',
                type:'2'
            },
            captureUrl:'',
            imgDialogVisible: false,
            dialogVisible:false
        }
    },
    methods: {
        queryCapture(row){
            this.imgDialogVisible = true
            if(row.cameraCaptureUrl.indexOf('http')==-1){
                row.cameraCaptureUrl = this._buillStaticPath(row.cameraCaptureUrl)
            }
            this.captureUrl = row.cameraCaptureUrl
        },
        doVideo(row){
            if(row.cameraHlsUrl.indexOf('http')==-1){
                row.cameraHlsUrl = this._buillStaticPath(row.cameraHlsUrl)
            }
            this.videoSrc = row.cameraHlsUrl
            this.dialogVisible = true
            this.videoTitle = row.cameraHlsUrl

            //根据预警数据入库时间去寻找对应的转码视频
            // API.video({time:moment(row.alarmTime).format('YYYY-MM-DD HH:mm:ss'),deviceId:row.equipmentId}).then(res=>{
            //     if(res.data.code === 0&&res.data.data.length>0){
            //         this.videoTitle = res.data.data[0]
            //         this.videoSrc = this._buillStaticPath(res.data.data[0])
            //         this.dialogVisible = true
            //     }else{
            //         this.videoSrc = ''
            //         this.$message.warning('暂无视频')
            //     }
            // })
        },
    
        query() {
            this.tableLoading = true
            API.page(Object.assign(this.tablePage, this.rfidEquipment)).then(res => {
                this.tableLoading = false
                if (res.data.code === 0) {
                    var result = res.data.data.records
                    result.map(item => {
                        item.createTime = this.dateFormat(item.createTime)
                        item.rfidPower = item.rfidPower //+"dBp"
                        item.isError = item.isError == 0 ? '否' : '是'
                        item.isAlarmName = item.isAlarm == 0 ? '否' : '是'
                        item.cameraCaptureUrl = item.cameraCaptureUrl||''
                        item.alarmType = fn(item.alarmName)
                        item.showVideo = item.alarmName == 'videoMotion'||item.alarmName == 'nonMotorEntrying'||item.alarmName == 'custom'
                    })
                    this.tableData = result
                    this.tablePage.total = Number.parseInt(res.data.data.total)
                }
            })
        },

        dateFormat(data) {
            var dat = new Date(data).toJSON()
            var rDate = new Date(+new Date(dat) + 8 * 3600 * 1000)
                .toISOString()
                .replace(/T/g, ' ')
                .replace(/\.[\d]{3}Z/, '')
            return rDate
        },
        rowDel(row) {
            this.$confirm('是否删除当前数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                API.deleteById(row.id).then(res => {
                    if(res.data.code === 0){
                        this.$message.success('删除成功')
                        this.query()
                    }
                })
            })
        },
        falsePositives(row){
            this.$confirm('当前报警数据是否误报?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                API.dealAlarm({ id: row.id,isError:1 }).then(res => {
                    if (res.data.code === 0) {
                        this.$message.success('数据误报标记成功！')
                        this.query()
                    }
                })
            })
        }
    },
    mounted() {
        this.query()
    }
}
</script>
